<template>
  <div data-v-f8b9ff9e="" class="address-page">
    <ul data-v-f8b9ff9e="" class="address-box pc-contactManager-address-box">
      <li data-v-f8b9ff9e="" v-for="(item, index) in addresslist" :key="index">
        <div data-v-f8b9ff9e="" class="address-left">
          <div data-v-f8b9ff9e="" class="address-tit">
            <h1 data-v-f8b9ff9e="">{{ item.toName }}</h1>
            <span data-v-f8b9ff9e="">{{ item.phone }}</span>
            <!---->
          </div>
          <div data-v-f8b9ff9e="" class="address-txt">
            <span data-v-f8b9ff9e=""
              >{{ item.city }} {{ item.provinceName }} {{ item.areaName }}
              {{ item.addressDetail }}</span
            >
          </div>
        </div>
        <router-link :to="'/children/addaddress/' + index">
          <div data-v-f8b9ff9e="" class="address-edit">
            <span data-v-f8b9ff9e="">编辑</span>
          </div>
        </router-link>
        <div
          data-v-f8b9ff9e=""
          class="address-edit cl-bor"
          @click="deladdress(item.id)"
        >
          <span data-v-f8b9ff9e="">删除</span>
        </div>
      </li>
    </ul>
    <router-link to="/children/addaddress/-1">
      <div data-v-f8b9ff9e="" class="q-fix">
        <div data-v-f8b9ff9e="" class="q-fix-btn">
          <span data-v-f8b9ff9e="">添加新地址</span>
        </div>
        <!---->
      </div>
    </router-link>
  </div>
</template>

<script>
import { getaddresslist, deleteaddress } from "../../api/zl-goods";
export default {
  data() {
    return {
      addresslist: [],
    };
  },
  created() {
    getaddresslist().then((res) => {
      this.addresslist = res.data.data;
    });
  },
  methods: {
    deladdress(id) {
      this.$dialog
        .confirm({
          message: "是否要删除联系人",
        })
        .then(() => {
          deleteaddress(id).then((res) => {
            this.$toast.success(res.data.msg);
            getaddresslist().then((res) => {
              this.addresslist = res.data.data;
            });
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ html {
  font-size: 100px;
}
</style>